<div class="ui grid">
  <div class="fifteen wide column">
    <div class="ui secondary pointing menu">
      <a class="active item">
        My Badges
      </a>
    </div>
  </div>
  {{#if model.length}}
  <div class="two wide column">
    <button class="ui orange basic right floated button downloadBadge" {{action 'batchdownload'}}>Download Badges</button>
  </div>
  {{/if}}
</div>
<div class="ui grid">
  <div class="sixteen wide column">
    <div class="ui basic segment">
      <div class="ui cards">
        {{#if model.length}}
        {{#each model as |badge|}}
        <div class="card">
          <div class="image">
            <img src="{{badge.image_link}}">
          </div>
          <div class="content">
            {{badge-name session=session model=model badge=badge user=user sendBadgeName=(action 'sendBadgeName'
            badge)}}
            <div class="ui horizontal divider"></div>
            <div class="description">
              Badge Size: {{badge.badge_size}}
            </div>
            <div class="description">
              Text Color: {{badge.text_color}}
            </div>
            <div class="description">
              Data: {{badge.csv}}
            </div>
          </div>
          <div class="extra center aligned content">
            <div class="ui grid">
              <div class="twelve wide column">
                <div class="ui horizontal compact basic buttons">
                  {{#ui-popup content='Download' class="ui icon button"}}
                  <a href="{{badge.download_link}}">
                    <i class="download icon"></i>
                  </a>
                  {{/ui-popup}}
                  {{#ui-popup content='Edit' class="ui icon button"}}
                    {{#link-to 'edit-badge' badge.id class="large item navbar-dropdown upper"}}
                      <i class="edit icon"></i>
                    {{/link-to}}
                  {{/ui-popup}}
                  {{#ui-popup content='Share' class="ui icon button"}}
                  <div class="ui dropdown">
                    <i class="share alternate icon"></i>
                    <div class="menu">
                      <div class="item"><a href="https://www.facebook.com/dialog/feed?app_id=1389892087910588&quote=Hey ! I have created Badges for My Event. You can create yours using Badgeyay.com&caption={{badge.badge_name}}&link={{badge.download_link}}&picture{{badge.image_link}}/200/200"
                          target="_blank"><i class="facebook icon"></i>Share to Facebook</a></div>
                      <div class="item"><a href="https://twitter.com/home?status=Hi!%20See%20my%20new%20badge%20on%20Badgeyay%20here%20-%20%20%0A{{badge.download_link}}"
                          target="_blank"><i class="twitter icon"></i>Share to Twitter</a></div>
                    </div>
                  </div>
                  {{/ui-popup}}
                  {{#ui-popup content='Delete' class='ui icon button' click=(action 'deleteBadge' badge)}}
                  <i class="trash alternate outline icon"></i>
                  {{/ui-popup}}
                </div>
              </div>
              <div class="four wide column">
                {{#ui-popup content='check to download'}}
                <input type="checkbox" class="ui checkbox downloadCheck" id={{badge.download_link}}>
                {{/ui-popup}}
              </div>
            </div>
          </div>
        </div>
        {{/each}}
        <div class="card">
          <a class="" href="/create-badges">
            <img src="/images/add_more.png" style="margin-top: 70px">
          </a>
        </div>
        {{else}}
        <center>
          <h2>You have not created any badges yet!</h2>
          <img src="/images/empty.png" style="width:30%;">
          <a class="ui fluid submit orange basic button" href="/create-badges" style="width: 30%">Create Badge</a>
        </center>
        {{/if}}
      </div>
    </div>
  </div>
</div>
{{#if model.length}}
<div class="ui horizontal divider"></div>
<div class="ui left floated pagination menu">
  <a class="icon item" {{action 'prevPage'}}>
    <i class="left chevron icon"></i>
  </a>
  <a class="icon item" {{action 'nextPage'}}>
    <i class="right chevron icon"></i>
  </a>
</div>
{{/if}}
<script>
  $('.ui.dropdown')
    .dropdown();
</script>
